<template>
  <el-dialog v-model="visible" :title="title" @close="cancel" width="80%">
    <el-table :data="array.tableData" row-key="id" @selection-change="tableSelect" table-layout="auto" style="width: 100%">
      <el-table-column type="selection" :selectable="selectable" width="55" />
      <el-table-column label="图片" width="">
        <template #default="scope">
          <el-image :src="scope.row.imageUrl" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="关联子栏目" width="" />
      <el-table-column prop="title" label="标题名称" show-overflow-tooltip width="200" />
      <el-table-column label="内容" show-overflow-tooltip width="">
        <template #default="scope">
          <div v-html="scope.row.contentText"></div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" width="" />
    </el-table>
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
    <template #footer>
      <el-button @click="cancel()">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import { formListNew, updateNew } from '@/api/allApi'

const emit = defineEmits(['resetList'])

const visible = ref(false)
const title = ref('新增')
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const array = reactive({
	tableData: []
})
const selectId = ref('')

const init = () => {
	visible.value = true
	formListNew({
		websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
		page: pageNum.value,
		size: pageSize.value
	}).then((res: any) => {
		if (res.code === 0) {
			array.tableData = []
			res.data.list.forEach((item: any) => {
				array.tableData.push({
					...item,
					contentText: new DOMParser().parseFromString(item.content, 'text/html').body.textContent,
					optionalState: true
				})
			})
			total.value = res.data.total
		} else {
			ElMessage.success(res.msg)
		}
	})
}
const tableSelect = (item: any) => {
	if (item.length >= 1) {
		selectId.value = item[0].id
		for (let i of array.tableData) {
			if (i.id == selectId.value) {
				i.optionalState = true
			} else {
				i.optionalState = false
			}
		}
	} else {
		selectId.value = ''
		for (let i of array.tableData) {
			i.optionalState = true
		}
	}
}
const selectable = (item: any) => {
	return item.optionalState
}
const submit = () => {
	updateNew({ id: selectId.value, show: 1, websiteId: Number(localStorage.getItem('WebsiteId')) }).then((res: any) => {
		if (res.code == 0) {
			ElMessage.success('操作成功')
			emit('resetList')
			cancel()
		} else {
			ElMessage.error(res.msg)
		}
	})
}
const cancel = () => {
	visible.value = false
}

defineExpose({
	init
})
</script>
<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	max-width: 100px;
	display: inline-block;
}
</style>
